<template>
    <div>
        <!--新增修改弹窗-->
        <Window :buttons="windowConfig.buttons" :show="windowConfig.show" @close="closeWindow">
            <el-form :model="formData" :rules="rules" ref="formDataRef">
                <el-form-item prop="title">
                    <div class="title-input">
                        <el-input placeholder="请输入博客标题" v-model="formData.title" size="large">
                        </el-input>
                    </div>

                </el-form-item>
                <el-form-item prop="markdownContent">
                    <div :style="{ 'width': '100%' }">
                        <EditorMarkdown :height="editorMarkDownHeight" v-model="formData.markdownContent"></EditorMarkdown>
                    </div>

                </el-form-item>
            </el-form>

            <!-- <EditorHtml :height="editorHtmlHeight"></EditorHtml> -->
            <el-dialog v-model="dialogVisible" title="发布文章" width="30%" :before-close="handleClose" :draggable="true"
                :close-on-click-modal="false" style="width: 800px;">
                <span></span>
                <template #footer>
                    <span class="dialog-footer">
                        <el-form class="blog-setting-form" :model="settingFormData" :rules="rules" ref="formDataRef" label-width="100px">
                            <el-form-item prop="categoryName" label="博客分类">
                                <el-select v-model="settingFormData.categoryId" clearable placeholder="请选择分类"
                                    :style="{ width: '100%' }">
                                    <el-option :value="item.categoryId" :label="item.categoryName"
                                        v-for="item in categoryList"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="cover" label="封面">
                                <CoverUpload v-model="settingFormData.cover"></CoverUpload>
                            </el-form-item>
                            <el-form-item prop="type" label="博客类型">
                                <el-radio-group v-model="settingFormData.type">
                                    <el-radio :label="1">原创</el-radio>
                                    <el-radio :label="0">转载</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item prop="reprintUrl" label="原文地址" v-if="settingFormData.type==0">
                                <el-input type="text" placeholder="请输入原文链接" v-model="settingFormData.reprintUrl"
                                    :autoSize="{ minRows: 4, maxRows: 4 }">
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="allowComment" label="评论">
                                <div class="allow-comment">
                                    <el-radio-group v-model="settingFormData.allowComment">
                                    
                                    <el-radio :label="1">允许</el-radio>
                                    <el-radio :label="0">不允许</el-radio>
                                </el-radio-group>
                                <span class="info">请在评论设置里设置好相应参数，评论才会生效</span>
                                    </div>
                                
                            </el-form-item>
                            <el-form-item label="博客摘要" prop="summary">
                                <el-input type="textarea" placeholder="请输入摘要" v-model="settingFormData.summary"
                                    :autoSize="{ minRows: 4, maxRows: 4 }">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="博客标签" prop="categoryDesc">
                                <div class="tag-input-panel">
                                    <el-tag v-for="(item,index) in settingFormData.tag" @close="closeTag(index)">
                                        {{ item }}
                                    </el-tag>
                                    <span class="info">
                                添加标签更容易被搜索引擎收录
                               </span>
                               <span class="iconfont icon-add" v-if="!showTagInput" @click="showTagInputHandler"></span>
                               <el-input class="tag-input" v-if="showTagInput" v-model="tagInputValue" @blur="tagInputResult" @keyup.enter="tagInputResult"></el-input>
                                </div>
                               
                            </el-form-item>
                        </el-form>
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="submitForm(false)">
                            确定
                        </el-button>

                    </span>

                </template>

            </el-dialog>
        </Window>
    </div>
</template>

<script setup>
import { fa } from 'element-plus/es/locale';
import { reactive, ref } from 'vue';
//新增,修改
const editorMarkDownHeight = window.innerHeight - 60 - 20 - 30 - 50 - 10 - 50
const editorHtmlHeight = window.innerHeight - 60 - 20 - 30 - 50 - 100 - 50
const windowConfig = reactive({
    show: true,
    title: "标题",
    buttons: [{
        type: "danger",
        text: "确定",
        click: (e) => {
            dialogVisible.value = true
        }
    }]
})
const showSettings = () => {
    dialogConfig.show = true
}
const closeWindow = () => {
    windowConfig.show = false;
    loadDataList();
}
const showEdit = (type, data) => {
    windowConfig.show = true
}
const dialogVisible = ref(false)
const formData = ref({});
//设置博客
const settingFormData = ref({tag:[]})
const dialogConfig = reactive({
    show: false,
    title: "新增分类",
    buttons: [
        {
            type: "primary",
            text: "确定",
            click: (e) => {

            }

        }
    ]
})
const categoryList = ref([])
//标签
const closeTag= () =>{

}
//是否需要显示tag输入框
const showTagInput=ref(false)

const showTagInputHandler=()=>{
    showTagInput.value=true
}
const tagInputValue=ref(null)
const tagInputResult=()=>{
    showTagInput.value=false
    settingFormData.tag.push(tagInputValue.value)
    tagInputValue.value=undefined
    
}
</script>
<style lang="scss">
.title-input {
    width: 100%;
    border-bottom: 1px solid #ddd;

    .el-input__wrapper {
        box-shadow: none;
    }

    input {
        font-size: 18px;
    }
}
.blog-setting-form{
    .allow-comment{
    display: flex;
    .info{
        margin-left: 10px;
        color: rgb(161, 159, 159);
        font-size: 13px;
    }
    }
    .tag-input-panel{
        display: flex;
        .info{
            width: 185px;
            color: rgb(161, 159, 159);
            font-size: 13px;
            margin-right: 10px;
        }
        .icon-add{
            color: red;
            margin-right: 10px;
            cursor: pointer;
        }
        .tag-input{
            width: 100px;
        }
    }
}

</style>